﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Button</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*body .mini-button .mini-button-text
    {
        padding-top:3px;
        padding-bottom:1px;
    }*/
    </style>
</head>
<body>
    <h1>Button 按钮 </h1>
    <p class="tip"></p>
    
    <h4>Only Text</h4>
    <a class="mini-button" onclick="onClick" enabled="false" >增加</a>
    <a class="mini-button" onclick="onClick" >修改</a>    

    <h4>Text and Icon</h4>
    <a class="mini-button" iconCls="icon-add" onclick="onClick">增加</a>
    <a class="mini-button mini-button-iconRight" iconCls="icon-edit" onclick="onClick" >修改</a>    

    <h4>Text and Img</h4>
    <a class="mini-button" img="../../scripts/miniui/themes/icons/add.gif" onclick="onClick">增加</a>
    <a class="mini-button" img="../../scripts/miniui/themes/icons/edit.gif" onclick="onClick" >修改</a>    

    <h4>Only Icon</h4>
    <a class="mini-button " iconCls="icon-add" onclick="onClick" tooltip="增加"></a>
    <a class="mini-button" iconCls="icon-edit" onclick="onClick" tooltip="编辑"></a>    

    <h4>Plain</h4>    
    <a class="mini-button " plain="true" iconCls="icon-add" onclick="onClick">增加</a>
    <a class="mini-button" plain="true" iconCls="icon-edit" onclick="onClick">修改</a>
    <a class="mini-button" plain="true" iconCls="icon-remove" onclick="onClick">删除</a>

    <h4>Icon Position</h4>
    <a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>    
    <a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>

    <h4>A Link</h4>
    <a class="mini-button" href="http://www.google.com" target="_blank">Google</a>
    <a class="mini-button" href="http://www.baidu.com">Baidu</a>
    
    <script type="text/javascript">
        mini.parse();
        function onClick(e) {
            var button = e.sender;
            var iconCls = button.getIconCls();
            var text = button.getText();
            if (iconCls) {
                alert("text: " + text + "\nicon: " + iconCls);
            } else {
                alert(text);
            }
        }

       
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>MiniUI Button能设置文本(text)、图标(iconCls)、超连接地址(href)、透明背景(plain)等外观。</p>
    </div>
</body>
</html>